import Utils from "./Utils.js";
import StepNumber from "./StepNumber.js";
export default class ShoppingCart{
    static styles=false;
    static DELETE_EVENT="delete_event";
    static CHECKED_EVENT="checked_event";
    constructor(_list){
        this.list=_list;
        this.elem=this.createE();
    }
    createE(){
        if(this.elem) return this.elem;
        //创建外层容器
        let div=Utils.createE("div");
        div.className="cart_main";
        //创建头部内容
        let cartTh=Utils.createE("div",{},{
            className:"cart_table_th"
        })
        this.createCartTableTh(cartTh);
        Utils.appendTo(cartTh,div);
        //创建购物车主体内容
        let cartCont=Utils.createE("div",{},{
            className:"cart_content"
        })
        this.createShoppingCartCont(cartCont);
        Utils.appendTo(cartCont,div);
        //创建底部总计
        let cartBottom=Utils.createE("div",{},{
            className:"cart_bottom"
        })
        this.createCartBottom(cartBottom);
        Utils.appendTo(cartBottom,div);
        //插入样式
        ShoppingCart.setStyle();
        //计算显示的总计
        this.totalCount();
        return div;
    }
    appendTo(parent){
        Utils.appendTo(this.elem,parent);
    }
    createCartTableTh(parent){
        //创建头部内容
        let str=`<div class="th th_chk"><label class="cart_checkbox"><span>全选<span></label></div>
        <div class="th th_item">商品信息</div>
        <div class="th th_price">金额</div>
        <div class="th th_amount">数量</div>
        <div class="th th_weight">重量</div>
        <div class="th th_location">&nbsp;</div>
        <div class="th th_sum">小计</div>
        <div class="th th_op">操作</div>`;
        parent.innerHTML=str;
        let input=Utils.createE("input",{},{
            type:"checkbox",
            //全选框的默认值根据state为1的商品来设置
            checked:this.list.filter(item=>item.state==1).every(item=>item.checked)
        })
        //给多选框监听点击事件
        input.addEventListener("click",e=>this.checkboxClickHandler(e,"all"));
        Utils.insertBefore(input,parent.firstElementChild.firstElementChild);
    }
    createShoppingCartCont(parent){
        //创建购物车主体内容
        this.list.forEach(item => {
            let ul=Utils.createE("ul",{
                //如果商品不可售卖，添加灰色背景
                backgroundColor:item.state==0?`#f5f5f5`:"none"
            },{
                className:"item_content clearfix"
            });
            ul.innerHTML=`<li class="td_chk"></li>
            <li class="td_item">
                <div class="item_pic"><a href="${item.href}" target="_blank"><img src="${item.img}"></a></div>
                <div class="item_info"><a href="${item.href}" target="_blank">${item.title}</a></div>
            </li>
            <li class="td_price">${item.price}</li>
            <li class="td_amount"></li>
            <li class="td_weight">${item.subWeight}kg</li>
            <li class="td_location">${item.state==1?"有货":"无货"}</li>
            <li class="td_sum">${item.subPrice}</li>
            <li class="td_op">删除</li>`;
            let input=Utils.createE("input",{},{
                type:"checkbox",
                checked:item.checked,
                //如果商品不可售卖，设置多选框不可点击
                disabled:item.state==0?true:false
            });
            Utils.appendTo(input,ul.firstElementChild);
            //创建step
            let step=this.createStepNumber(item);
            Utils.appendTo(step,ul.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling);
            //监听删除事件
            ul.lastElementChild.addEventListener("click",()=>this.deleGoodsInfo(item));
            Utils.appendTo(ul,parent);
            //给可售卖商品的多选框监听点击事件
            if(item.state==1) input.addEventListener("click",e=>this.checkboxClickHandler(e,item));
        });
    }
    createStepNumber(obj){
        let stepNumber=new StepNumber(obj);
        return stepNumber.elem;
    }
    createCartBottom(parent){
        //创建底部内容
        let label=Utils.createE("label");
        let input=Utils.createE("input",{},{
            type:"checkbox",
            //全选框的默认值根据state为1的商品来设置
            checked:this.list.filter(item=>item.state==1).every(item=>item.checked)
        })
        //全选框监听点击事件
        input.addEventListener("click",e=>this.checkboxClickHandler(e,"all"));
        Utils.appendTo(input,label);
        Utils.appendTo(Utils.createE("span",{margin:"0px"},{textContent:"全选"}),label);
        Utils.appendTo(label,parent);
        //创建删除按钮
        let delBtn=Utils.createE("a",{},{
            className:"cart_bottom_del",
            textContent:"删除"
        });
        //监听删除事件
        delBtn.addEventListener("click",()=>this.deleGoodsInfo("all"));
        Utils.appendTo(delBtn,parent);
        //创建文字内容
        this.spanNum=Utils.createE("span");
        Utils.appendTo(this.spanNum,parent);
        this.spanWeight=Utils.createE("span");
        Utils.appendTo(this.spanWeight,parent);
        this.spanPrice=Utils.createE("span");
        Utils.appendTo(this.spanPrice,parent);
    }
    totalCount(){
        //总计，初始设置为0
        this.totalPrices=0;
        this.totalWeight=0;
        this.totalNum=0;
        this.list.forEach(item=>{
            if(item.checked){
                //计算选中商品的总计
                this.totalPrices+=Number(item.subPrice);
                this.totalWeight+=Number(item.subWeight);
                this.totalNum+=Number(item.num);
            }
        })
        this.spanPrice.innerHTML=`商品总价<em>￥${this.totalPrices.toFixed(2)}</em>`;
        this.spanWeight.innerHTML=`商品总重：${this.totalWeight.toFixed(2)}kg`;
        this.spanNum.innerHTML=`总共：${this.totalNum}件商品`;

    }
    checkboxClickHandler(e,type){
        //多选框抛发事件
        let evt=new Event(ShoppingCart.CHECKED_EVENT);
        evt.data=type;
        evt.tag=e.target;
        document.dispatchEvent(evt);
    }
    deleGoodsInfo(type){
        //删除商品
        if(type==="all"){
            this.list.forEach(item=>{
                //使用递归循环
                if(item.checked) this.deleGoodsInfo(item);
            })
        }else{
            //删除商品抛发事件
            let evt=new Event(ShoppingCart.DELETE_EVENT);
            evt.data=type;
            document.dispatchEvent(evt);
        }
    }
    static setStyle(){
        if(ShoppingCart.styles) return;
        ShoppingCart.styles=true;
        Utils.insertCss(".cart_main",{
            width:"980px",
            fontSize:"12px",
            color: "#696969",
            background:"#fff",
            margin:"20px auto 0px",
            textAlign:"center",
            userSelect:"none"
        })
        Utils.insertCss(".cart_table_th",{
            height: "34px",
            border: "1px solid #dbdbdb",
            borderBottom:"none",
            lineHeight: "34px",
            background: "#f3f3f3",
            color: "#666"
        })
        Utils.insertCss(".cart_table_th .th",{
            float: "left",
            textAlign: "center"
        })
        Utils.insertCss(".cart_table_th .th_chk",{
            width:"58px"
        })
        Utils.insertCss(".cart_checkbox",{
            width: "13px",
            height: "13px",
        })
        Utils.insertCss(".th_item",{
            width:"290px"
        })
        Utils.insertCss(".th_price,.td_price",{
            width:"100px"
        })
        Utils.insertCss(".th_amount,.td_amount",{
            width:"115px"
        })
        Utils.insertCss(".th_weight,.td_weight",{
            width:"70px"
        })
        Utils.insertCss(".th_location,.td_location",{
            width:"137px"
        })
        Utils.insertCss(".th_sum,.td_sum",{
            width:"115px"
        })
        Utils.insertCss(".th_op,.td_op",{
            width:"89px",
            cursor:"pointer"
        })
        Utils.insertCss(".cart_content",{
            border: "1px solid #dbdbdb",
            backgroundColor: "#f3f3f3"
        })
        Utils.insertCss(".item_content",{
            listStyle:"none",
            padding:"0px",
            margin:"0px",
            height:"82px",
            backgroundColor:"#fff",
            borderBottom:"1px solid #dbdbdb"
        })
        Utils.insertCss(".item_content li",{
            paddingTop:"16px",
            float:"left"
        })
        Utils.insertCss(".item_content .td_chk",{
            width: "44px",
            paddingTop:"32px",
        })
        Utils.insertCss(".td_item",{
            width:"308px",
            textAlign:"left"
        })
        Utils.insertCss(".item_pic",{
            width:"60px",
            height:"60px",
            float:"left"
        })
        Utils.insertCss(".item_pic img",{
            width:"60px",
            height:"60px"
        })
        Utils.insertCss(".item_info",{
            float:"left",
            padding:"12px 15px 0 11px",
            width: "220px"
        })
        Utils.insertCss(".item_info a",{
            color:"#666",
            textDecoration:"none"
        })
        Utils.insertCss(".cart_bottom",{
            height:"62px",
            lineHeight:"62px",
            backgroundColor:"#e6e6e6",
            marginTop:"20px",
            textAlign:"left",
            fontSize:"14px"
        })
        Utils.insertCss(".cart_bottom label,.cart_bottom_del,.cart_bottom span",{
            margin:"0px 20px"
        })
        Utils.insertCss(".cart_bottom_del",{
            color:"#696969",
            textDecoration:"none",
            cursor:"pointer"
        })
        Utils.insertCss(".cart_bottom em",{
            color:"#e71a0f",
            fontStyle:"normal",
            fontSize:"18px"
        })
    }
}
